<!-- Dom模板 -->
<template>
  <div class="student">
    <!-- Dom内容 -->
    <p>学员</p>
    <!-- 筛选头部 -->
    <Header @screens="screens" :student="student">
      <template v-slot:tit>
        <p class="header_tit">学员筛选</p>
      </template>
      <el-form-item class="paymentType">
        <span>未付款</span>
        <el-switch
          v-model="val"
          @change="paymentStatus()"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <span>已付款</span>
      </el-form-item>
    </Header>

    <!-- 列表 -->
    <div class="studentTable">
      <div class="student_header">
        <span>学员列表</span>
      </div>
      <!-- 列表 -->
      <el-table
        @select-all="handleSelectAll"
        @select="handleSelect"
        max-height="300"
        :data="
          newStudent.slice(
            (Number(pageIndex) - 1) * Number(pages),
            Number(pageIndex) * Number(pages)
          )
        "
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="id" label="用户id" width="90"> </el-table-column>
        <el-table-column prop="user_name" label="用户昵称" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="200">
        </el-table-column>
        <el-table-column prop="totalPayment" label="付费总额" width="120">
        </el-table-column>
        <el-table-column prop="orderQuantity" label="订单数量" width="120">
        </el-table-column>
        <el-table-column prop="LastPaidTime" label="上次付费时间" width="200">
        </el-table-column>
        <el-table-column prop="userDisable" label="账户禁用" width="120">
          <template slot-scope="scope">
            <el-switch
              @change="
                userDisabled({
                  id: scope.row.id,
                  userDisable: scope.row.userDisable,
                })
              "
              :value="scope.row.userDisable === '0' ? false : true"
              active-color="rgb(56 162 138)"
              inactive-color="#ddd"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="122">
          <template slot-scope="scope">
            <el-button
              class="compile"
              type="text"
              size="small"
              @click="EditBounced(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              class="delete"
              type="text"
              @click="deleteBtn(scope.row.id)"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Paging
      v-if="newStudent.length > 0"
      :tableData="newStudent.length"
      :pagesize="pages"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
      :currentPage="pageIndex"
    />
    </div>
    <!-- 编辑弹框 -->
    <Layer class="layerr" :layerIsShow="this.layerIsShow" v-if="isShow">
      <div class="cover">
        <div class="layer_cover_Con">
          <el-form ref="form" label-width="80px">
            <el-form-item label="用户昵称">
              <el-input v-model="name"></el-input>
            </el-form-item>

           <el-form-item label="手机号">
              <el-input v-model="phone"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="layerIsShow()">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </Layer>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Header from "../header";
import Layer from "../layer";
import Paging from '../../../../components/paging/index.vue'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      student: [],
      allState: "",
      pageStudent: "",
      pages: 2,
      pageIndex: 1,
      val: false,
      isShow: false,
      newStudent: [],
      phone: "",
      name: "",
      id: "",
    };
  },
  components: {
    Header,
    Layer,
    Paging
  },
  computed: {
    checkAll: {
      get() {
        return this.student.every((item) => {
          return item.isChecked;
        });
      },
      set(val) {
        this.student.map((item) => {
          console.log(val);
          this.$axios.post("/api/user/checkAll", {
            val,
            type: item.type,
          });
          this.getStudent();
          item.isChecked = val;
        });
      },
    },
    // ...mapState(["student"]),
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getStudent();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    // 获取数据
    async getStudent() {
      let res = await this.$axios.get("/api/user/userStudent");
      this.student = res.data;
      this.newStudent = res.data;
    },

    // 分页
    handleSizeChange(val) {
      this.pages = val;
    },
    // 分页
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    // 反选

    handleSelect(val) {
      // let boo = ''
      // if(val.length === 0){
      //   boo = false
      // }
      // this.$axios.post("/api/user/checked", {
      //   val,
      // });
    },
    // 全选
    handleSelectAll(val) {
      let boo = val.length === 0 ? false : true;
      this.$axios.post("/api/user/checkAll", {
        boo,
        type: this.student[0].type,
      });
    },
    // 删除
    deleteBtn(id) {
      this.$axios.post("/api/user/deleteStudent", {
        id,
      });
      this.getStudent();
    },
    // 编辑弹框
    EditBounced(id) {
      this.isShow = true;
      this.id = id;
      let arr = this.student.filter((item) => {
        return item.id === id;
      })[0];
      this.name = arr.user_name;
      this.phone = arr.phone;
    },
    // 弹框不显示
    layerIsShow() {
      this.isShow = false;
    },
    // 支付状态
     paymentStatus() {
      this.newStudent = this.student.filter((item) => {
        return (item.paymentType === "Y"?true:false) === this.val
      });
      
    },
    // 用户禁用
    userDisabled({ id, userDisable }) {
      this.$axios.post("/api/user/userDisabled", {
        id,
        userDisable: userDisable === "0" ? false : true,
      });
      
      this.getStudent();
    },
    // 保存
    onSubmit() {
      this.$axios.post("/api/user/upDatestudent", {
        id:this.id,
        name:this.name,
        phone:this.phone
      });
      this.getStudent();
      this.layerIsShow()
    },
    // 筛选
    screens(res) {
      this.newStudent = this.student.filter((item) => {
        return item.user_name.includes(res) || item.id.includes(res);
      });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
p {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.student {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 60px;
  position: relative;
}
.studentTable {
  width: 100%;
  min-height: 450px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  padding: 0 30px;
}
.student_header {
  height: 64px;
  width: 100%;
  text-align: right;
  line-height: 64px;
}

.student_header span {
  float: left;
}
.student_footer {
  display: flex;
  height: 80px;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  background: #fff;
  padding: 0 30px;
}

.student_rig li.active {
  color: #38a28a !important;
}
.compile {
  color: #38a28a;
}
.delete {
  color: #f44235;
}
.Excel {
  color: #38a28a;
  font-size: 14px;
  margin: 0 0 0 30px;
}
.paymentType {
  margin: 0 30px;
}
.paymentType span {
  margin: 0 10px;
}

.cover {
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.layer_cover_Con {
  width: 60%;
  height: 50%;
  box-sizing: border-box;
  padding: 100px;
  background: #fff;
  position: absolute;
  left: 20%;
  top: 20%;
}
</style>